<template>
	<!-- 添加地址页面 -->
	<view class="address-list-page">
		<!-- 姓名输入框盒子 -->
		<view class="address-name-input-box">
			<!-- 姓名文本盒子 -->
			<view class="name-text-box">
				<!-- 姓名文本 -->
			<span class="name-text">姓名</span>
			</view>
			<!-- 姓名输入框 -->
			<input class="address-name-input" placeholder="收货人姓名"></input>
		</view>
		<!-- 电话输入框盒子 -->
		<view class="address-phone-input-box">
			<!-- 电话文本盒子 -->
			<view class="phone-text-box">
				<!-- 电话文本 -->
			<span class="phone-text">电话</span>
			</view>
			<!-- 电话输入框 -->
			<input class="address-phone-input" placeholder="收货人手机号"></input>
		</view>
		<!-- 地区输入框盒子 -->
		<view class="area-input-box">
			<!-- 地区文本盒子 -->
			<view class="area-text-box">
			<!-- 使用自定义触发元素来打开选择器 -->
					<view class="trigger-area"  @click="openPicker">
						{{ selectedArea || '地区' }}
					</view>
					<!-- 地区选择器 -->
					<cityPicker
						:column="column" 
						:default-value="defaultValue" 
						:mask-close-able="maskCloseAble" 
						@confirm="confirm" 
						@cancel="cancel" 
						:visible="visible"
					/>
			</view>
		</view>
		<!-- 详细地址输入框盒子 -->
		<view class="address-input-box">
			<!-- 详细地址文本盒子 -->
			<view class="address-text-box">
				<!-- 详细地址文本 -->
			<span class="address-text">详细地址</span>
			</view>
			<!-- 详细地址输入框 -->
			<input class="address-input" placeholder="街道门牌、楼层房间号等信息"></input>
		</view>
		<!-- 邮政编码输入框盒子 -->
		<view class="address-mail-input-box">
			<!-- 邮政编码文本盒子 -->
			<view class="mail-text-box">
				<!-- 邮政编码文本 -->
			<span class="mail-text">邮政编码</span>
			</view>
			<!-- 邮政编码输入框 -->
			<input class="address-mail-input" placeholder="邮政编码"></input>
		</view>
		<!-- 默认地址输入框盒子 -->
		<view class="default-address-input-box">
			<!-- 默认地址文本盒子 -->
			<view class="default-address-text-box">
				<!-- 默认地址文本 -->
			<span class="default-address-text">设为默认收货地址</span>
			</view>
			<!-- 默认地址输入框 -->
			<input class="default-address-input" disabled="true"></input>
		</view>
	</view>
	<button class="save-address-btn">保存</button>
</template>

<script setup>
	import { ref } from 'vue';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	
	const visible = ref(false);
	const maskCloseAble = ref(true);
	const selectedArea = ref(''); // 存储选中的地区
	const defaultValue = ref('420103');
	const column = ref(3);
	
	// 打开选择器
	const openPicker = () => {
		visible.value = true;
	};
	
	const confirm = (val) => {
	    console.log(val);
	    // 将选中的地区转换为字符串显示
	    selectedArea.value = val.map(item => item.text).join('/');
	    visible.value = false;
	};
	
	const cancel = () => {
	    visible.value = false;
	};
	
	onShareAppMessage(() => {
	    return {
	        title: '地址管理',
	        path: '/pages/address/address'
	    };
	});
	
	onShareTimeline(() => {
	    return {
	        title: '地址管理'
	    };
	});
</script>

<style lang="scss">
	// 添加地址页面
	.address-list-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// 姓名输入框盒子
		.address-name-input-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			align-items: center;
			justify-content: center;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 姓名文本盒子
			.name-text-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 姓名
				.name-text {
					font-size: px2rpx(14);
				}
			}
			// 姓名输入框
			.address-name-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
		}
		
		// 电话输入框盒子
		.address-phone-input-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			align-items: center;
			justify-content: center;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 电话文本盒子
			.phone-text-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 电话
				.phone-text {
					font-size: px2rpx(14);
				}
			}
			// 电话输入框
			.address-phone-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
		}
		// 地区输入框盒子
		.area-input-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 地区文本盒子
			.area-text-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 添加触发区域的样式
				.trigger-area {
					width: px2rpx(319);
				}
				/* 确保选择器在正确层级 */
				.city-picker {
				    z-index: 9999;
				}
			}
			// 地区输入框
			.address-area-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
			// 添加地址
			.add-address-icon {
				width: px2rpx(16);
				height: px2rpx(14);
			}
			.area-select {
				width: px2rpx(319);
			}
		}
		// 详细地址输入框盒子
		.address-input-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			align-items: center;
			justify-content: center;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 详细地址文本盒子
			.address-text-box {
				width: px2rpx(70);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 详细地址
				.address-text {
					font-size: px2rpx(14);
				}
			}
			// 详细地址输入框
			.address-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
		}
		// 邮政编码输入框盒子
		.address-mail-input-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			align-items: center;
			justify-content: center;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 邮政编码文本盒子
			.mail-text-box {
				width: px2rpx(70);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 邮政编码
				.mail-text {
					font-size: px2rpx(14);
				}
			}
			// 邮政编码输入框
			.address-mail-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
		}
		// 默认地址输入框盒子
		.default-address-input-box {
			display: flex;
			align-items: center;
			justify-content: center;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 默认地址文本盒子
			.default-address-text-box {
				width: px2rpx(190);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 默认地址文本
				.default-address-text {
					font-size: px2rpx(14);
				}
			}
			// 默认地址输入框
			.default-address-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
		}
	}
	// 保存按钮
	.save-address-btn {
		margin-top: px2rpx(22);
		width: px2rpx(343);
		border-radius: px2rpx(22);
		background: linear-gradient(to right, #ff0000, #fff07d);
		height: px2rpx(44);
		color: rgba(248, 248, 248, 0.9);
	}
</style>